<template>
  <view class="page min-h-screen from-red-300 to-red-200 bg-gradient-to-b">
    <!-- Content -->
    <view class="px-4 py-20">
      <!-- Logo and Welcome -->
      <view class="mb-6 flex flex-col px-4">
        <view class="mb-4 flex items-center gap-4">
          <image
            src="/static/images/logo.png"
            class="h-12 w-12"
            mode="aspectFit"
          />
          <text class="text-4xl text-red-800 font-bold">
            Hello!
          </text>
        </view>
        <text class="text-lg text-red-800 font-bold">
          欢迎进入 西安旅游职业中等专业学校
        </text>
      </view>

      <!-- Login Card -->
      <view class="rounded-lg bg-white/90 p-6 backdrop-blur-sm">
        <!-- Login Tabs -->
        <view class="px-8">
          <RoundSwitch
            v-model="isTeacher"
            left-text="新生登录"
            right-text="教职工登录"
          />
        </view>

        <!-- Login Form -->
        <view class="mt-8 space-y-4">
          <u-input
            v-model="form.phone"
            placeholder="请输入手机号码"
            prefix-icon="account"
            border="surround"
            class="rounded"
          />

          <u-input
            v-model="form.idNumber"
            placeholder="请输入身份证后6位"
            prefix-icon="lock"
            border="surround"
            class="rounded"
            password
          />

          <!-- Agreement Checkbox -->
          <view class="flex items-center">
            <up-checkbox-group v-model="form.agreement">
              <u-checkbox
                shape="circle"
                active-color="#bc4242"
                class="flex-shrink-0"
              />
            </up-checkbox-group>
            <text class="text-sm text-gray-600">
              我已查看并同意
              <text class="text-red-600">
                《用户服务协议及隐私政策》
              </text>
            </text>
          </view>

          <!-- Login Button -->
          <u-button
            text="登录"
            type="error"
            :disabled="!form.agreement.length"
            class="mt-8"
            @click="handleLogin"
          />
        </view>
      </view>

      <!-- Instructions -->
      <view class="mt-8 px-4 text-sm text-gray-600 space-y-2">
        <view class="mb-2 font-medium">
          用户须知：
        </view>
        <view>1. 新生登录账号为招生系统填报的个人信息中的手机号码，密码为身份证号后6位，即此处的账号密码同录取查询的账号密码。</view>
        <view>2. 如未在招生系统填报志愿，则账号密码为向学校招生办门提供的手机号码和身份证号后6位。</view>
        <view>3. 教职工账号为个人手机号码。</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import RoundSwitch from '@/components/round-switch/index';
import { reactive, ref } from 'vue';

const isTeacher = ref(false);

const form = reactive({
  phone: '',
  idNumber: '',
  agreement: false,
});

const handleLogin = () => {
  if (!form.phone || !form.idNumber) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    });
    return;
  }

  if (!form.agreement) {
    uni.showToast({
      title: '请同意用户协议',
      icon: 'none',
    });
    return;
  }

  // TODO: Implement login logic
  uni.showLoading({
    title: '登录中...',
  });

  setTimeout(() => {
    uni.hideLoading();
    uni.switchTab({
      url: '/pages/tab/home/index',
    });
  }, 1000);
};
</script>

<style>
.page {
  min-height: 100vh;
}

:deep(.u-input) {
  background: white;
}

:deep(.u-tabs__wrapper__nav__line) {
  height: 3px;
  border-radius: 2px;
}

:deep(.u-button--error) {
  background: #bc4242;
}

:deep(.u-button--error--disabled) {
  background: #bc4242;
  opacity: 0.5;
}
</style>
